<template>
    <div>
        <ul class="mui-table-view mui-input-group">
            <li class="mui-table-view-cell mui-media-connect tips" v-if='!friends.length'>
              {{warningTip}}
            </li>
            <li class="mui-table-view-cell mui-media-connect" v-for="item in friends" :key="item.jid" :data-jid="item.jid">
                <div class="mui-input-row mui-checkbox">
                    <label>
                        <img class="mui-media-object mui-pull-left"
                        :src="item.headicon || $imHeadIcon">
                        <div class="mui-media-body">
                            {{item.name}}
                        </div>
                    </label>
                    <input type="checkbox" :value='item.jid' name='friend' class='checkbox'>
              </div>
            </li>
        </ul>
    </div>
</template>
<script>
import {mapState} from 'vuex'
  export default {
    // 组件传值进来
    props: {
        warningTip: {
            type: String,
            default: '您还没有好友，赶紧添加一个哦'
        },
        emptyFlag: {
          type: Boolean,
          default: false
        }
    },
    data() {
      return {
        value: '',
        // 当前选择到朋友，打算创建群聊的 后面再做选中的朋友的头像插到这里去******
        selectArr: []
      }
    },
    created() {
    },
    computed: {
      ...mapState(['friends'])
    },
    watch: {
      emptyFlag(newVal) {
        // console.log(newVal)/
        if (newVal) {
          this.emptyChoose()
        }
      }
    },
    mounted() {
      this.init()
    },
    methods: {
      init() {
        let self = this
        self.$immui.init()
        self.$immui('.mui-input-group').on('change', 'input', function() {
          let jid = this.getAttribute('value')
          if (jid && jid.length > 0) {
            let checked = this.checked
            let arr = jid.split('_')
            arr = arr[1].split('@')
            jid = arr[0]
            if (checked) {
              self.selectArr.push(jid)
            } else if (!checked) {
              self.selectArr = self.selectArr.filter(f => f !== jid)
            }
          }
          console.log(self.selectArr)
          // 把选中的数组传递出去
          self.$emit('tellSelectArrZi', self.selectArr)
        })
      },
      // 将这个页面所有的input置为未选
      emptyChoose() {
        // console.log(123)
        const self = this
        for (let i = 0; i < self.$immui('input').length; i++) {
          let type = self.$immui('input')[i].type
          console.log(self.$immui('input')[i].type)
          if (type === 'checkbox') {
            self.$immui('input')[i].checked = false
          }
        }
        self.selectArr = []
        self.$emit('tellSelectArrZi', self.selectArr)
        // this.$immui('input')[0].checked = false
        // this.$immui('input')[0].checked = false
        // this.$immui('input')[0].checked = false
      }
    }
  }
</script>
<style lang='scss' scoped>
.mui-table-view-cell{
  padding: 0;
}
.checkbox{
  line-height: 64px;
}
.mui-scroll-wrapper{
  top: 44px;
}
  .mui-media-body{
    line-height: 40px;
  }
  .tips{
    color: rgb(162, 165, 167);
  }
.mui-input-group .mui-input-row{
  height: auto;
}
</style>
